<template>
  <div class="home">
    <div class="t" >
      <img src="@/assets/tou.jpg" class="t1" />
      <img src="@/assets/fh.png" class="t3" @click="prev" />
      <h3>阿道夫官方旗舰店</h3>
      <button class="t2" @click="home">进店</button>
    </div>
   
    <div class="b" v-show="showData">
      <button
        class="b1"
        @click="select(1)"
        :class="index == 1 ? 'blue' : 'gery'"
      >
        服务评价
      </button>
      <button
        class="b2"
        @click="select(2)"
        :class="index == 2 ? 'blue' : 'gery'"
      >
        加入会员
      </button>
      <button
        class="b3"
        @click="select(3)"
        :class="index == 3 ? 'blue' : 'gery'"
      >
        退换货
      </button>
      <button
        class="b4"
        @click="select(4)"
        :class="index == 4 ? 'blue' : 'gery'"
      >
        售后查询
      </button>
    </div>

    <div class="bchange" v-show="showData1">
      <button
        class="b1"
        @click="select(1)"
        :class="index == 1 ? 'blue' : 'gery'"
      >
        服务评价
      </button>
      <button
        class="b2"
        @click="select(2)"
        :class="index == 2 ? 'blue' : 'gery'"
      >
        加入会员
      </button>
      <button
        class="b3"
        @click="select(3)"
        :class="index == 3 ? 'blue' : 'gery'"
      >
        退换货
      </button>
      <button
        class="b4"
        @click="select(4)"
        :class="index == 4 ? 'blue' : 'gery'"
      >
        售后查询
      </button>
    </div>
    <!-- <div class="foot3">
       <input
        type="text"
        placeholder="请输入要咨询的内容"
        class="in2"
        v-show="showData1"
      />
    </div> -->
    <div class="foot3">
      <el-autocomplete
  v-model="state"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入要查询的内容"
  @select="handleSelect"
  v-show="showData1"
   class="in2"
></el-autocomplete>

    </div>
    
    <div class="foot1" v-show="showData1">
      <el-collapse accordion >
  <el-collapse-item>
    <template slot="title">
      <img src="@/assets/say.png" class="img1"  @click="showChange"/>
    </template>
    <template slot="title">
      
    </template>
    <template slot="title">
       <img src="@/assets/face.png" class="img2" />
    </template>
      <template slot="title">
      <img src="@/assets/add.png" class="img3" @click="echange1"/>
     
    </template>
    <div v-show="eData1">
        <el-button type="primary" icon="el-icon-delete">搜索</el-button>
      </div>
    <div class="ele2" v-show="eData">
       
      <p class="p1">请说话</p>
      <img src="@/assets/say1.png" class="img4" @click="echange"/>
    <p class="p2">说完了</p>
    </div>
    
  </el-collapse-item>
</el-collapse>
    </div>

    <div class="foot" v-show="showData">
      <el-collapse accordion >
  <el-collapse-item>
    <template slot="title">
      <img src="@/assets/say.png" class="img1" @click="showChange"/>
    </template>
    <template slot="title">
      <input
        type="text"
        placeholder="请输入要咨询的内容"
        class="in1"
      />
    </template>
    <template slot="title">
       <img src="@/assets/face.png" class="img2" />
    </template>
      <template slot="title">
      <img src="@/assets/add.png" class="img3" />
    </template>
  </el-collapse-item>
</el-collapse>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login2",
  data() {
    return {
      show: true,
      index: 1,
      showData:true,
      showData1:false,
       restaurants: [],
        state: '',
        timeout:  null,
        eData:true,
        eData1:false
    };
  },
  
  methods: {
    select(i) {
      this.index = i;
    },
    home() {
      window.location.href = "https://mall.jd.com/index-1000081681.html";
    },
    prev() {
      this.$router.go(-1);
    },
    showChange(){
       this.showData = !this.showData;
      this.showData1 = !this.showData1;
    },
    echange(){
      this.eData = !this.eData;
      this.eData1 =false
      
    },
    echange1(){
      this.eData1 = !this.eData1;
       this.eData = false;
    },
     loadAll() {
        return [
          { "value": "服务评价）", "address": "中国" },
          { "value": "加入会员）", "address": "中国" },
          { "value": "退换货", "address": "中国" },
          { "value": "售后查询)", "address": "中国" },
          { "value": "呃呃呃呃呃）", "address": "中国-101" },
          { "value": "贩夫贩妇", "address": "中国" },
          { "value": "灌灌灌灌", "address": "中国" },
          { "value": "红红火火恍恍惚惚", "address": "中国" },
          { "value": "唉", "address": "中国-107" },
          { "value": "斤斤计较", "address": "中国" },
          { "value": "坎坎坷坷", "address": "中国" },
          { "value": "溜了溜了", "address": "中国" },
          { "value": "迷迷茫茫", "address": "中国" },
          { "value": "袅袅娜娜你", "address": "中国" },
          { "value": "噢噢噢噢", "address": "中国" },
          { "value": "乒乒乓乓", "address": "中国" },
          { "value": "凄凄切切", "address": "中国" },
          { "value": "柔柔弱弱", "address": "中国" },
          { "value": "三生三世", "address": "中国-F01-1-306" },
          { "value": "通天塔", "address": "中国" },
          { "value": "uuuu", "address": "中国" },
          { "value": "vvv", "address": "中国" },
          { "value": "呜呜呜", "address": "中国" },
          { "value": "惺惺惜惺惺", "address": "中国" },
          { "value": "一月又一月", "address": "中国" },
          { "value": "重中之重", "address": "中国" },
        ];
      },
       querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        console.log(item);
      }
  },
  mounted() {
      this.restaurants = this.loadAll();
    }
};
</script>
<style scoped>
.el-button{
  background-color: teal;
}
.ele2{
  height: 100px;
}
form {
  width: 600px;
  height: 40px;
}
.input_area {
  width: 500px;
  margin-left: 10px;
}
page {
  background: #5372af;
}
input{
  border: none;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  text-align: center;
  line-height: 40px;
  width: 70%;
}
.in2{
   border: none;
  position: absolute;
  margin: auto;
   top: 495px;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 15px;
  text-align: center;
  line-height: 40px;
  width: 50%;
   z-index: 1;
}

input:focus {
  outline: medium;
}

.foot1{
  padding-top:80px ;
  display: flex;
  width: 100%;
  position: absolute;
  z-index: 0;
}
.foot {
  display: flex;
  height: 50px;
  width: 100%;
  background-color: rgb(241, 236, 236);
  position: absolute;
  bottom: 0px;
}
.img1 {
  margin: 11px 11px;
  height: 30px;
  width: 30px;
}
.img2 {
  margin: 11px 280px;
  position: absolute;
  height: 30px;
  width: 30px;
}
.img3 {
  margin: 11px 330px;
  position: absolute;
  height: 30px;
  width: 30px;
}
.img4{
  position: absolute;
  height: 130px;
  width: 100%;
  z-index: 1;
  margin-left:-45px ;
}
.p1{
  position: absolute;
  z-index: 2;
  margin-left: 150px;
}
.p2{
  position: absolute;
  z-index: 2;
  margin-left: 150px;
  top:200px
}
.b {
  padding-top: 500px;
  display: flex;
  justify-content: space-between;
}
.bchange{
  padding-top: 300px;
  display: flex;
  justify-content: space-between;
}
.b1 {
  border-style: none;
  line-height: 40px;
  border-radius: 15px;
}
.b2 {
  border-style: none;
  line-height: 40px;
  border-radius: 15px;
}
.b3 {
  border-style: none;
  line-height: 40px;
  border-radius: 15px;
}
.b4 {
  border-style: none;
  line-height: 40px;
  border-radius: 15px;
}

.gery {
  color: grey;
  font-size: 15px;
}
.blue {
  color: blue;
  font-size: 20px;
}
.t {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
}
.t1 {
  height: 80px;
  width: 100%;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
}
.t2 {
  position: absolute;
  margin: 0 70px;
  border-style: none;
  border-radius: 15px;
  background-color: red;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(60%, 240%);
}
.t3 {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-1 0%, 240%);
}
h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
}
</style>